<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 定义根标签 
     未来react创建的元素会插入到这个根标签中,从而渲染出来 
    -->
    <div id="root"></div>

    <!-- 2. 引入react.js和react-dom.js 
     注意: 
     1. 要先引入react,后引入react-dom. 因为react-dom依赖react
     2. react.js引入之后,得到了一个全局对象叫做React
     3. react-dom.js引入之后,得到了一个全局对象叫做ReactDOM
    -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>

    <!-- 3. 根据react提供的方法创建虚拟dom -->
    <script type="text/babel">
      let arr = [
        {
          id: 1,
          name: 'hj',
          age: 48,
          hobby: '洗脚',
        },
        {
          id: 2,
          name: 'lt',
          age: 28,
          hobby: '摄影',
        },
      ]
      // 根据arr数组,得到两段li标签. newArr中存储了两个li标签的虚拟dom
      // const newArr = arr.map((item) => {
      //   return (
      //     // 注意: 列表渲染时,为了提高react底层执行的性能,需要给最外面的标签加一个key属性.key属性的值要求不能在他们的父元素范围内重复即可
      //     <li key={item.id}>
      //       <h1>{item.name}</h1>
      //       <p>{item.age}</p>
      //       <p>{item.hobby}</p>
      //     </li>
      //   )
      // })
      // const div = <ul>{newArr}</ul>

      // 简化代码: 
      const div = (
        <ul>
          {arr.map((item) => {
            return (
              // 注意: 列表渲染时,为了提高react底层执行的性能,需要给最外面的标签加一个key属性.key属性的值要求不能在他们的父元素范围内重复即可. 为何添加了key就可以提高性能这个问题,会在后面的章节中讲解
              <li key={item.id}>
                <h1>{item.name}</h1>
                <p>{item.age}</p>
                <p>{item.hobby}</p>
              </li>
            )
          })}
        </ul>
      )

      // 4. 根据虚拟dom创建真实dom,并插入到root中渲染页面
      ReactDOM.createRoot(document.getElementById('root')).render(div)
    </script>
  </body>
</html>
